<template>
  <div class="step3-container">
    <a-icon
      class="icon"
      type="check-circle"
      theme="filled"
    />
    <div class="text">
      Congratulations, you now have access to bank feeds!
    </div>
    <a-button
      class="button"
      type="primary"
      size="large"
      @click="complete"
    >
      complete
    </a-button>
  </div>
</template>

<script>
export default {
  methods: {
    complete() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.step3-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  .icon {
    font-size: 100px;
    color: $theme-color;
  }

  .text {
    font-size: $font-size-lg;
    font-weight: bold;
    margin-top: $margin-md;
    margin-bottom:  $margin-lg;
  }

  .button {
    width: 420px;
  }
}
</style>
